<template>
  <u-popup
    class="padding"
    custom-style="width:90%"
    :safeAreaInsetBottom="true"
    :safeAreaInsetTop="true"
    :mode="popupData.mode"
    :show="showDetail"
    :round="popupData.round"
    :overlay="popupData.overlay"
    :closeable="popupData.closeable"
    :closeOnClickOverlay="popupData.closeOnClickOverlay"
    @close="close"
  >
    <view class="padding">
      <view class="padding-tb margin-top grid col-3">
        <view
          class="flex-col text-df flex-center"
          v-for="item in list"
          :key="item.key"
        >
          <view class="margin-top text-grey flex"
            >{{ item.lable }}
            <u-icon
              v-if="item.canEdit"
              name="edit-pen"
              color="#0081ff"
              @click="editAttr(item.key, item.value)"
            ></u-icon
          ></view>
          <view
            v-if="item.canEdit"
            class="text-cut w100 text-center text-bold"
            >{{ item.value }}</view
          >
          <view
            v-else
            class="text-cut w100 text-center text-bold"
            @click="showInfoToast(item.value)"
            >{{ item.value || "--" }}</view
          >
        </view>
      </view>
    </view>
    <u-modal
      :show="showEditor"
      showCancelButton
      :closeOnClickOverlay="false"
      @confirm="confirm"
      @cancel="closeEditor"
      @close="closeEditor"
    >
      <u-form
        v-if="showEditor"
        class="padding w100 bg-white bd-r"
        :model="form"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item
          label-width="90"
          v-if="editorData.isSwitch"
          prop="val"
        >
          <u-radio-group  v-model="form.val">
            <u-radio name="删除计划" label="删除计划"></u-radio>
            <u-radio class="margin-lr" name="投放中" label="投放中"></u-radio>
            <u-radio name="计划暂停" label="计划暂停"></u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label-width="90" v-else label="修改内容" prop="val">
          <u-input v-model="form.val" />
        </u-form-item>
      </u-form>
    </u-modal>
  </u-popup>
</template>

<script>
import { toast } from "@/common/toast.js";
const langMapAll = {
  status: "状态",
  budget: "预算",
  cpa_bid: "出价",
  advertiser_name: "户名",
  name: "计划名",
  cost: "消耗",
  sale: "销售",
  effective_sale: "有效销售",
  roi: "roi",
  effective_roi: "有效roi",
  order_num: "订单数",
  convert: "转化数",
};
// http://124.220.1.25:3000/project/11/interface/api/299
// http://124.220.1.25:3000/project/11/interface/api/307
// http://124.220.1.25:3000/project/11/interface/api/811

import { updateStatus, updateBid, updateBudget } from "@/api";
import { mapGetters } from "vuex";
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    showDetail: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      form: { val: undefined },
      editorData: {},
      ctx: undefined,
      showEditor: false,
      popupData: {
        closeable: true,
        overlay: true,
        mode: "center",
        round: 10,
        closeOnClickOverlay: true,
      },
      rules: {
        input: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["isAdmin", "curProStatus"]),

    list() {
      return Object.keys(langMapAll).map((key) => {
        return {
          key,
          canEdit: ["status", "budget", "cpa_bid"].includes(key),
          lable: langMapAll[key],
          value: this.info[key],
        };
      });
    },
  },
  methods: {
    showInfoToast(v) {
      toast({ title: v });
    },
    closeEditor() {
      this.showEditor = false;
      this.form.val = undefined;
    },
    confirm() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          this.editorData?.api(this.form.val).then(() => {
            this.showEditor = false;
            this.form.val = undefined;
          });
        })
        .catch((errors) => {
          console.error(errors);
          uni.$u.toast("表单校验失败");
        });
    },
    editAttr(k, v) {
      console.log(k, v);
      this.editorData = {
        params: {},
        api: undefined,
        isSwitch: false,
      };
      const ad_user_plan_id = this.info.ad_user_plan_id;
      switch (k) {
        case "status":
          this.editorData.isSwitch = true;
          const statusMap = {
            投放中: "enable",
            计划暂停: "enable",
            删除计划: "delete",
          };
          this.editorData.api = (v) => {
            console.log("v", v);
            return updateStatus({
              channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
              opt_status: statusMap[v],
              ad_user_plan_ids: [ad_user_plan_id],
            }).then((r) => {
              this.info[k] = v;
              return r;
            });
          };

          break;
        case "budget":
          this.editorData.api = (v) =>
            updateBid({
              channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
              budget: +v,
              ad_user_plan_id,
            }).then((r) => {
              this.info[k] = +v;
              return r;
            });
          break;
        case "cpa_bid":
          this.editorData.api = (v) =>
            updateBudget({
              channel: this.isAdmin ? 0 : this.curProStatus == "pdd" ? 1 :this.curProStatus == "jd" ?4: 3,
              bid: +v,
              ad_user_plan_id,
            }).then((r) => {
              this.info[k] = +v;
              return r;
            });
          break;

        default:
          break;
      }
      this.form.val = v;
      this.$nextTick(() => {
        this.showEditor = true;
      });
    },
    close() {
      this.$emit("update:showDetail", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  background-image: url("~@/static/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
